<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="jquery1.9/jquery-1.9.0.js"></script> -->
    <script src="jquery1.7/jquery-1.7.js"></script>
    <script>
        $(function(){
            // 1.直接使用事件名 jQuery对象.事件名(函数)
            $("#btn").click(function(){
                console.log("点击事件");
            });
            // // 2.使用on或者bind(3.0-)   jQuery对象.on("事件名",函数)   jQuery对象.bind("事件名",函数)
            $("#btn").on("mouseover",function(){
                console.log("鼠标悬浮事件");
            });
            $("#btn").bind("mouseout",function(){
                console.log("鼠标离开事件");
            });
            //只执行一次的事件
            // $("#btn").one("click",function(){
            //     console.log("只执行一次");
            // });
            // 3.使用on或者bind同时绑定多个事件   jQuery对象.on(对象)   jQuery对象.bind(对象)
            // $("#btn").on({
            //     "click":function(){
            //         console.log("点击事件");
            //     },
            //     "mouseover":function(){
            //         console.log("鼠标悬浮事件");
            //     },
            //     "mouseout":function(){
            //         console.log("鼠标离开事件");
            //     }
            // });

            //复合事件(mouseenter 和mouseleave)
            // $("#btn").hover(function(){
            //     console.log("鼠标经过");
            // },function(){
            //     console.log("鼠标离开");
            // });
            
            // // 交替点击(1.9-)
            // $("#btn").toggle(function(){
            //     $(this).css("background","red");
            // },function(){
            //     $(this).css("background","green");
            // },function(){
            //     $(this).css("background","pink");
            // });

            $("#btn2").click(function(){
                // jQuery对象.off("事件名1  事件名2")  jQuery对象.unbind("事件名1  事件名2")
                // jQuery对象.off()    jQuery对象.unbind()移除所有事件
                // $("#btn").off("click mouseover");//移除多个事件
                $("#btn").off();//移除所有事件

            });
        });
    </script>
</head>
<body>
    <input type="button" value="绑定事件的方式" id="btn">
    <input type="button" value="移除事件" id="btn2" >
</body>
</html>